Layouts and Rendering 2 (asset tag helpers)
Continued from Layouts and Rendering 1 (yield, content_for, content_for?).
In this chapter, we'll learn about Asset Tag Helpers among the three main components of layouts.
When Rails renders a view as a response, it does so by combining the view with the current layout, using the rules for finding the current layout.
Within a layout, we have access to three tools for combining different bits of output to form the overall response:
- yield and content_for
- Asset tags
- Partials
Asset tag helpers provide methods for generating HTML that link views to JavaScript, stylesheets, and images. The following are the asset tag helpers available in Rails:
- auto_discovery_link_tag
- javascript_include_tag
- stylesheet_link_tag
- image_tag
- video_tag
- audio_tag
The auto_discovery_link_tag, javascript_include_tag, and stylesheet_link_tag are most commonly used in the <head> section of a layout.
Actually, the page below is using the tag helpers:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'head', 'data-turbolinks-track' => true %> <%= headjs_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %>
The javascript_include_tag helper returns an HTML script tag for each source provided.
We can specify a full path relative to the document root, or a URL, if we prefer. For example, to link to a JavaScript file that is inside a directory called javascripts inside of one of app/assets, lib/assets or vendor/assets, we do this:
<%= javascript_include_tag 'head', 'data-turbolinks-track' => true %>
Rails then output a script tag like this:
<script data-turbolinks-track="true" src="/assets/head-690ec4cbd343e717ec39e5cd123bfc6d.js"></script>
The request to this asset is then served by the Sprockets gem.
The stylesheet_link_tag helper returns an HTML <link> tag for each source provided.
This helper usually generates a link to /assets/stylesheets/. This link is then processed by the Sprockets gem. A stylesheet file can be stored in one of three locations: app/assets, lib/assets or vendor/assets.
In the above example, we used the tag in:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
After Sprockets gem processed it, we have:
<link data-turbolinks-track="true" href="/assets/application-0a6610b87a547af5eb0e4f276bd835a3.css" media="all" rel="stylesheet" />
By default, the stylesheet_link_tag creates links with media="screen" rel="stylesheet". But we did override one of the defaults by specifying media: 'all'.
There are more tags left:
- image_tag
- video_tag
- audio_tag
We'll deal with them later.
Ruby on Rails
- Ruby On Rails Home
- Ruby - Input/Output, Objects, Load
- Ruby - Condition (if), Operators (comparison/logical) & case statement
- Ruby - loop, while, until, for, each, (..)
- Ruby - Functions
- Ruby - Exceptions (raise/rescue)
- Ruby - Strings (single quote vs double quote, multiline string - EOM, concatenation, substring, include, index, strip, justification, chop, chomp, split)
- Ruby - Class and Instance Variables
- Ruby - Class and Instance Variables II
- Ruby - Modules
- Ruby - Iterator : each
- Ruby - Symbols (:)
- Ruby - Hashes (aka associative arrays, maps, or dictionaries)
- Ruby - Arrays
- Ruby - Enumerables
- Ruby - Filess
- Ruby - code blocks and yield
- Rails - Embedded Ruby (ERb) and Rails html
- Rails - Partial template
- Rails - HTML Helpers (link_to, imag_tag, and form_for)
- Layouts and Rendering I - yield, content_for, content_for?
- Layouts and Rendering II - asset tag helpers, stylesheet_link_tag, javascript_include_tag
- Rails Project
- Rails - Hello World
- Rails - MVC and ActionController
- Rails - Parameters (hash, array, JSON, routing, and strong parameter)
- Filters and controller actions - before_action, skip_before_action
- The simplest app - Rails default page on a Shared Host
- Redmine Install on a Shared Host
- Git and BitBucket
- Deploying Rails 4 to Heroku
- Scaffold: A quickest way of building a blog with posts and comments
- Databases and migration
- Active Record
- Microblog 1
- Microblog 2
- Microblog 3 (Users resource)
- Microblog 4 (Microposts resource I)
- Microblog 5 (Microposts resource II)
- Simple_app I - rails html pages
- Simple_app II - TDD (Home/Help page)
- Simple_app III - TDD (About page)
- Simple_app IV - TDD (Dynamic Pages)
- Simple_app V - TDD (Dynamic Pages - Embedded Ruby)
- Simple_app VI - TDD (Dynamic Pages - Embedded Ruby, Layouts)
- App : Facebook and Twitter Authentication using Omniauth oauth2
- Authentication and sending confirmation email using Devise
- Adding custom fields to Devise User model and Customization
- Devise Customization 2. views/users
- Rails Heroku Deploy - Authentication and sending confirmation email using Devise
- Deploying a Rails 4 app on CentOS 7 production server with Apache and Passenger I
- Deploying a Rails 4 app on CentOS 7 production server with Apache and Passenger II
- OOPS! Deploying a Rails 4 app on CentOS 7 production server with Apache and Passenger (Trouble shooting)
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization